@extends('mbcore.baseadmin::layout.iframe')
@section('title', $subtitle)

@section('content')
    <style>
        .radio label{width:60px;}

        /*div{*/
        /*    width:100%;*/
        /*}*/
        .radio label{
            width:60px;
        }
        .required_field{
            color:red;
        }
    </style>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">

                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{{ $subtitle }}</h5>
                    </div>
                    <div class="ibox-content">
                        {{--<form  class="form-horizontal" action="{{route('admin.platform.manager.add')}}" method="post">--}}
                        {!! Form::open(['enctype'=>'multipart/form-data','class'=>'form-horizontal']) !!}

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                活动名称
                            </label>
                            <div class="col-sm-10">
{{--                                <label>--}}
                                    <input type="text" class="form-control" name="name"  value="{{ old('name', '') }}" required aria-required="true" placeholder="请输入活动名称">
{{--                                </label>--}}
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                活动费用（元）
                            </label>
                            <div class="col-sm-10">
                                <label>
                                <input type="text" class="form-control" name="price"  value="{{ old('price', 0) }}" required aria-required="true" placeholder="请输入活动价格" step="1" max="0">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                图片
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <div id="uploader-demo">
                                        <!--用来存放item-->
                                        <div id="fileList" class="uploader-list"></div>
                                        <div id="filePicker">选择图片</div>
                                        <input type="button" id="btn" value="开始上传">
                                    </div>
                                </label>
                                <input type="hidden" class="form-control" name="image" id="image">
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                            <span style="color:red;">*</span>
                                报名开始时间
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input class="form-control layer-date" name="signup_start_at" placeholder="请选择报名开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="{{old('signup_start_at',date('Y-m-d H:i:s'))}}">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                报名结束时间
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input class="form-control layer-date" name="signup_end_at" placeholder="请选择报名结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="{{old('signup_end_at',date('Y-m-d H:i:s'))}}">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                活动开始时间
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input class="form-control layer-date" name="start_at" placeholder="请选择活动开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="{{old('start_at',date('Y-m-d H:i:s'))}}">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                活动结束时间
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input class="form-control layer-date" name="end_at" placeholder="请选择活动结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="{{old('end_at',date('Y-m-d H:i:s'))}}">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                活动地点
                            </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="local"  value="{{ old('local', '') }}" required aria-required="true" placeholder="请输入活动地点">
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                报名人数
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input type="text" class="form-control" name="total_counts"  value="{{ old('total_counts', 0) }}"  placeholder="请输入报名人数" step="1" min="0" required aria-required="true">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                联系人
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input type="text" class="form-control" name="contacts"  value="{{ old('contacts') }}"  placeholder="请输入联系人" required aria-required="true">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                联系电话
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input type="text" class="form-control" name="contact_mobile"  value="{{ old('contact_mobile') }}"  placeholder="请输入联系电话" required aria-required="true" maxlength="11">
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label required_field">
                                <span style="color:red;">*</span>
                                活动详情
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <script id="editor" type="text/plain" style="width:1024px;height:500px;" name="detail">{!! old('detail','') !!}</script>
                                </label>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                {{--                                <span style="color:red;">*</span>--}}
                                排序
                            </label>
                            <div class="col-sm-10">
                                <label>
                                    <input type="text" class="form-control" name="sort"  value="{{ old('sort',1) }}"  placeholder="请输入排序" step="1" min="0">
                                </label>
                            </div>
                        </div>

                        @include('common.alert_error')

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit">保存内容</button>
                            </div>
                        </div>
                        {{ csrf_field() }}
{{--                        <input type="hidden"  name="roles" value="center">--}}
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@push('startcss')
    <link href="{{ config('mbcore_baseadmin.baseadmin_assets_path')}}/css/plugins/webuploader/webuploader.css"
          rel="stylesheet">
@endpush
@section('myscript')
{{--    <script src="{{ config('mbcore_baseadmin.baseadmin_assets_path')}}/js/jquery.min.js"></script>--}}
    <script src="{{ config('mbcore_baseadmin.baseadmin_assets_path')}}/js/plugins/layer/laydate/laydate.js"></script>
    <script src="{{ config('mbcore_baseadmin.baseadmin_assets_path')}}/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="{{ config('mbcore_baseadmin.baseadmin_assets_path')}}/js/plugins/validate/messages_zh.min.js"></script>
    <script src="{{ config('mbcore_baseadmin.baseadmin_assets_path')}}/js/plugins/webuploader/webuploader.js"></script>
    <script>
        var uploadUrl =   '{{ route("fileUpload")}}';
        var BASE_URL = "{{ config('mbcore_baseadmin.baseadmin_assets_path')}}/js/plugins/webuploader";
    </script>
    <script type="text/javascript" charset="utf-8" src="{{ config('mbcore_ueditor.ueditor_assets_path')}}/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config('mbcore_ueditor.ueditor_assets_path')}}/ueditor.all.min.js"> </script>
    @include('common.success_prompt_js',$params);
    <script type="text/javascript">
        var ue = UE.getEditor('editor');
    </script>
    <script>
        // 初始化Web Uploader
        {{--var uploadUrl =   '{{ route("fileUpload")}}';--}}
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: false,
            // swf文件路径
            swf: BASE_URL+"/js/plugins/webuploader" + '/js/Uploader.swf',
            // 文件接收服务端。
            server: uploadUrl,
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            // pick: '#filePicker',
            pick: {
                id: '#filePicker',
                multiple:false,
                label: '点击选择图片'
            },
            fileNumLimit: 1,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            console.log('file');
            console.log(file);
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                ),
                $img = $li.find('img');

            console.log('li');
            console.log(file.name);
            // $list为容器jQuery实例
            // $list.empty();
            // $list.append( $li );
            // $('#fileList').append($li);
            $('#fileList').html($li);
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            var thumbnailWidth = 100;
            var thumbnailHeight = 100;
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ,response) {
            $( '#'+file.id ).addClass('upload-state-done');
            console.log('file');
            console.log(file);
            console.log('response');
            console.log(response._raw);
            $('#image').val(response._raw)
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');
            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }
            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file) {
            console.log('uploadComplete');
            console.log(file);
            $( '#'+file.id ).find('.progress').remove();
        });
        // 所有文件上传成功后调用
        uploader.on('uploadFinished', function () {
            //清空队列
            uploader.reset();
        });
        //只允许上传一个，每次文件加入队列前触发
        uploader.on('beforeFileQueued',function(){
            uploader.reset();
            uploader.refresh();
        });
        // //绑定提交事件
        // $("#btn").click(function() {
        //     console.log("上传...");
        //     uploader.upload();   //执行手动提交
        // });
        var state = '';
        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }
            if (state === 'uploading') {
                $("#btn").val('暂停上传');
            } else {
                $("#btn").val('开始上传');
            }
        });
        $("#btn").on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
                alert('图片上传成功')
            }
        });
    </script>
@stop
